<template>
    <template v-for="(item,index) in props.menuData" :key="item.meta.id">
      <!-- 没有 children 的 -->
        <el-menu-item 
        :index="`${props.index}-${item.meta.id}`"
          v-if="!item.children||item.children.length === 0" 
          :key="item.meta.id"
          @click="handleClick(item,`${props.index}-${item.meta.id}`)"
          >
          <el-icon size="20">
              <component :is="item.meta.icon" />
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-menu-item>  
        <!-- 有 children 的 -->
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
          <template #title>
              <el-icon size="20">
                  <component :is="item.meta.icon" />
              </el-icon>
            <span>{{ item.meta.name }}</span>
          </template> 
          <!-- 递归 -->
          <tree-menu :menuData="item.children" :index="`${props.index}-${item.meta.id}`"></tree-menu>
        </el-sub-menu>
    </template>
</template>
<script setup lang="ts">
import {useRouter}from 'vue-router'
const router = useRouter()

const props = defineProps(['menuData','index'])
console.log(props.menuData, 'menuData')
const handleClick = (item: any, index: string) => {
  console.log(item.meta, index)
  // 这里可以添加路由跳转逻辑
  // 比如使用 vue-router 的 push 方法
  router.push({ path: item.meta.path })
}
</script>